<template>
  <!-- 预览 -->
  <a-modal
    v-model:visible="previewVisible"
    :closable="false"
    class="previewModal"
    :bodyStyle="{
      padding: 0
    }"
    :footer="null"
  >
    <div v-drag :style="{ width: compWidth + 'px' }" class="preview">
      <div class="preview-content">
        <a-button class="close" type="link" @click="onClose">
          <template #icon>
            <CloseOutlined />
          </template>
        </a-button>
        <header class="df" style="height: 45px">
          <div class="header-tool f1">
            <a-button class="pa" style="top: 6px" @click="decline">
              <template #icon> <MinusOutlined /></template>
            </a-button>
            <!-- <span class="size">{{ 100 + state.previewSize + '%' }}</span> -->
            <a-input
              id="input"
              ref="inputText"
              v-model:value="state.previewSize"
              :maxLength="3"
              style="width: 60px; left: 58px; top: 5px"
              class="pa"
              @blur="inputBlur"
            />
            <span class="pa" style="left: 125px; top: 10px">%</span>
            <a-button
              class="pa"
              style="left: 145px; top: 6px"
              @click="increase"
            >
              <template #icon><PlusOutlined /> </template>
            </a-button>
          </div>
        </header>
        <div class="preview-content_body">
          <template v-if="props.fileList.length === 1">
            <img
              v-if="
                ['png', 'jpeg', 'jpg', 'gif'].includes(
                  props.fileList[0].ossType.toLowerCase()
                )
              "
              alt="该文件不支持在线查看，可尝试下载下来查看"
              style="width: 100%"
              :src="props.fileList[0].ossUrl"
            />
            <span v-else>该文件不支持在线查看，可尝试下载下来查看</span>
          </template>
          <a-carousel
            v-else
            arrows
            effect="fade"
            :initialSlide="initialSlide"
            :afterChange="afterChange"
          >
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 0; zindex: 1">
                <LeftOutlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 0">
                <RightOutlined />
              </div>
            </template>
            <template v-for="item in props.fileList" :key="item.uid">
              <img
                v-if="
                  ['png', 'jpeg', 'jpg', 'gif'].includes(
                    item.ossType.toLowerCase()
                  )
                "
                alt="该文件不支持在线查看，可尝试下载下来查看"
                style="width: 100%"
                :src="item.ossUrl"
              />
              <span v-else>该文件不支持在线查看，可尝试下载下来查看</span>
            </template>
          </a-carousel>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import {
  MinusOutlined,
  PlusOutlined,
  CloseOutlined,
  LeftOutlined,
  RightOutlined
} from '@ant-design/icons-vue'
import { reactive, computed } from 'vue'
const props = defineProps({
  file: {
    type: Object
  },
  fileList: {
    type: Array,
    default() {
      return []
    }
  },
  visible: {
    type: Boolean,
    default: false
  },
  showDownload: {
    type: Boolean,
    default: false
  }
})
const vDrag = {
  beforeMount: el => {
    // 在元素上做些操作
    el.onmousedown = function (e) {
      if (e.target.nodeName === 'INPUT') {
        return
      }
      const input = document.getElementById('input')
      input.blur()
      e.preventDefault()
      const disx = e.clientX - el.offsetLeft
      const disy = e.clientY - el.offsetTop
      document.onmousemove = function (e) {
        let x = e.clientX - disx
        let y = e.clientY - disy
        // 左
        if (x <= 0) {
          x = 0
        }
        // 上
        if (y <= 0) {
          y = 0
        }
        // 右
        if (x >= window.innerWidth - el.offsetWidth) {
          x = window.innerWidth - el.offsetWidth
        }
        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  }
}
const inputBlur = () => {
  if (state.previewSize > 200) state.previewSize = 200
  if (state.previewSize < 100) state.previewSize = 100
}
const previewVisible = computed(() => {
  return props.visible
})
const initialSlide = computed(() => {
  return props.fileList.findIndex(item => item.ossUrl === props.file.ossUrl)
})
const compWidth = computed(() => {
  if (state.previewSize <= 100) {
    return 500
  } else if (state.previewSize >= 200) {
    return 1000
  } else {
    return 500 + (500 * (state.previewSize - 100)) / 100
  }
})
const afterChange = current => {
  state.activeIndex = current
}
const state = reactive({
  previewSize: 100,
  file: props.file,
  activeIndex: initialSlide.value,
  fileList: props.fileList
})
const emits = defineEmits(['update:visible'])
// 关闭
const onClose = () => {
  emits('update:visible', false)
}
const increase = () => {
  if (state.previewSize >= 200) return
  state.previewSize += 10
}
const decline = () => {
  if (state.previewSize <= 100) return
  state.previewSize -= 10
}
// const downloadImg = async (errorInfo = '导出失败') => {
//   const index = state.activeIndex
//   const { ossUrl: url, name, type } = state.fileList[index]
//   const suffix = ['ai', 'prj', 'webp', 'psd', 'dxf', 'rul', 'xlsx', 'excel']
//   const fileType = url.substring(url.lastIndexOf('.') + 1)
//   if (suffix.includes(fileType)) {
//     const a = document.createElement('a')
//     a.setAttribute('href', url)
//     a.setAttribute('target', '')
//     a.setAttribute('download', '')
//     a.click()
//     return
//   }
//   try {
//     const response = await axios({
//       methods: 'get',
//       headers: {
//         'Content-Type': 'multipart/form-data',
//         token: getQueryString('token') || localStorage.token
//       },
//       url: url.replace('https:', window.location.protocol),
//       responseType: 'blob'
//     })
//     const blob = await new Blob([response.data], { type: type || 'image/png' })
//     // 创建隐藏的可下载链接
//     const objectUrl = window.URL.createObjectURL(blob)
//     const a = document.createElement('a')
//     // 地址
//     a.href = objectUrl
//     // 修改文件名
//     a.download = name
//     // 触发点击
//     document.body.appendChild(a)
//     a.click()
//     // 移除
//     window.URL.revokeObjectURL(blob)
//     setTimeout(() => document.body.removeChild(a), 1000)
//   } catch (error) {
//     message.error(errorInfo)
//   }
// }
</script>
<style lang="scss" scoped>
.preview {
  position: absolute;
  right: 50%;
  top: 100px;
  /* margin-right: -250px; */
  z-index: 99;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  &-content {
    position: relative;
    background-color: #fff;
    .close {
      width: 40px;
      height: 40px;
      color: rgba(0, 0, 0, 0.45);
      position: absolute;
      right: 0;
      top: 0;
    }
    header {
      padding: 5px 20px;
      border-bottom: 1px solid #e8e8e8;
      .header-tool {
        .ant-btn-icon-only {
          width: 30px;
          height: 30px;
        }
        .size {
          width: 100px;
          text-align: center;
          margin: 0 10px;
        }
      }
    }
    .preview-content_body {
      padding: 20px;
    }
  }
}
</style>
<style>
.previewModal.ant-modal {
  width: unset !important;
  top: 0 !important;
}
</style>
<style scoped>
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}
.ant-carousel :deep(.slick-dots li button) {
  background-color: #1890ff;
}
.ant-carousel .slick-arrow.custom-slick-arrow {
  font-size: 14px;
  color: #333;
  width: 25px;
  line-height: 50px;
  text-align: center;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.6);
  /* opacity: 0.3; */
}
:deep(.slick-slider, .slick-slide div, .slick-track, .slick-list) {
  height: 100%;
}
:deep(.slick-track) {
  display: flex;
  align-items: center;
}
.preview :deep(.slick-list) {
  max-height: 700px;
  overflow-y: auto;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.5;
}
.custom-slick-arrow.slick-arrow.slick-prev {
  z-index: 9;
}
</style>
